<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>广州美食标记图</title>
</head>
<script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
</style>

<body onload="initMap()">
    <div id="container"></div>
    <script>
        function initMap() {
            var center = new TMap.LatLng(23.114488,113.26531);//设置中心点坐标
            //初始化地图
            var map = new TMap.Map("container", {
                center: center
            });

            //初始marker
            var marker = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 24,
                        "height": 35,
                        "anchor": { x: 12, y: 35 },
                        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                    })
                },
                geometries: [{
                    "id": 'show1',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.103092,113.275742),
                    "properties": {
                        "title": "糖水铺"
                    }
                }, {
                    "id": 'demo2',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(22.967768,113.346588),
                    "properties": {
                        "title": "顺德金牌煲仔饭"
                    },

                }, {
                    "id": 'demo3',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.110741,113.24178),
                    "properties": {
                        "title": "吴财记面家"
                    },

                }, {
                    "id": 'demo4',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.141208,113.258502),
                    "properties": {
                        "title": "点都德"
                    },

                }, {
                    "id": 'demo5',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.142952,113.288733),
                    "properties": {
                        "title": "怪叔美食店"
                    },

                }, {
                    "id": 'demo6',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.102631,113.275088),
                    "properties": {
                        "title": "老广味糕点店"
                    },

                }, {
                    "id": 'demo7',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.131674,113.248016),
                    "properties": {
                        "title": "西华路"
                    },

                }, {
                    "id": 'demo8',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.13248,113.246697),
                    "properties": {
                        "title": "珍珍小食店"
                    },

                }, {
                    "id": 'demo9',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.122505,113.274239),
                    "properties": {
                        "title": "達揚原味燉品"
                    },

                }, {
                    "id": 'demo10',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.11071,113.268989),
                    "properties": {
                        "title": "霞女美食店"
                    },

                }, {
                    "id": 'demo11',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.017428,113.371805),
                    "properties": {
                        "title": "粤陈记煲仔粥"
                    },

                }, {
                    "id": 'demo12',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.124269,113.275531),
                    "properties": {
                        "title": "咏春葱油饼"
                    },

                }, {
                    "id": 'demo13',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.132864,113.284649),
                    "properties": {
                        "title": "无名车仔牛杂"
                    },

                }, {
                    "id": 'demo14',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.087046,113.266012),
                    "properties": {
                        "title": "林氏凉茶"
                    },

                }, {
                    "id": 'demo15',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.131274,113.302086),
                    "properties": {
                        "title": "惠食佳"
                    },

                }, {
                    "id": 'demo16',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.122006,113.280823),
                    "properties": {
                        "title": "今天糖水"
                    },

                }, {
                    "id": 'demo17',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.130648,113.321821),
                    "properties": {
                        "title": "龚印记牛骨牛杂屋"
                    },

                }, {
                    "id": 'demo18',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.046499,113.293414),
                    "properties": {
                        "title": "强记早茶"
                    },

                }, {
                    "id": 'demo19',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.118404,113.264632),
                    "properties": {
                        "title": "明华饼店"
                    },

                }, {
                    "id": 'demo12',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(23.126922,113.267886),
                    "properties": {
                        "title": "拿福食府"
                    },

                }]
            });
            //初始化infoWindow
            var infoWindow = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(23.114488,113.26531),
                offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
            });
            infoWindow.close();//初始关闭信息窗关闭
            //监听标注点击事件
            marker.on("click", function (evt) {
                //设置infoWindow
                infoWindow.open(); //打开信息窗
                infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
                infoWindow.setContent(evt.geometry.properties.title);//设置信息窗内容
            })
        }
    </script>
</body>

</html>